<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /**
         * Ajax基础知识：
         *  在js中有内置的构造函数来创建ajax对象
         *  创建ajax对象以后，我们就使用ajax对象的方法去发送请求和接受请求响应
         *  Ajax最大的一个特点就是 无需刷新页面便可向服务器传输或读写数据 这一特点主要得益于XMLHttp组件XMLHTTPRequest对象
         * 
         * XMLHttpRequest对象方法描述：
         *  abort() : 停止当前请求
         *  getAllResponseHeaders():把HTTP请求的所有响应首部作为键/值对返回
         *  getResponseHeader('header'):返回指定首部的事情
         *  open("method","URL",[asyncFlag],["userName"],["password"])
         *  send()向服务器发送请求
         *  setRequestHeader("header","value")
         *      把指定首部设置为所提供的值，在设置任何首部之前必须先调用open()，设置header并和
         *      请求一起发送('post'方法一定要) 
         *     创建XMLHttpRequest对象：
         *     const xhr = new XMLHttpRequest()
         * 
         * XMLHttpRequest对象的属性描述:
         *  onreadystatechange：状态改变的事件触发器，每个状态改变时都会触发这个事件处理器
         *  redyState:请求的状态。有5个可取值：
         *          0 => 未初始化
         *          1 => 正在加
         *          2 => 已加载
         *          3 => 交互中
         *          4 => 完成
         *  responseText: 服务器的响应，返回数据的文本
         *  responseXML ：服务器的响应，返回数据的兼容DOM的XML文档参数，这个对象可以解析为一个DOM对象
         *  responseBody:服务器返回的主题
         *  responseStream:服务器返回的数据流
         *  status：服务器的HTTP状态码(如404，200等等)
         *  statusText:服务器返回的状态文本信息，HTTP状态码的相应文本
         * 
         * 状态码：
         *       readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
                 readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
                 readyState === 2 : 表示 send 方法已经执行完成
                 readyState === 3 : 表示正在解析响应内容
                 readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

         * 
         */
    </script>


    <script>
        // 接口地址 ： https://api.apiopen.top/getJoke

        //1.创建对象
        const xhr = new XMLHttpRequest();
        //2.初始化
        xhr.open("GET","https://api.apiopen.top/getJoke")
        //3.发送
        xhr.send();

        //4.绑定事件，处理响应事件数据
        xhr.onreadystatechange = function(){
            //判断, === 4 发送成功并且已经返回
            if(xhr.readyState === 4){
                if(xhr.status >= 200 && xhr.status < 300 ){
                    //表示成功
                    console.log(xhr.response)
                }else{
                    //失败
                    console.error(xhr.status)
                }
            }
        }

        //使用Promise来进行封装
        const p = new Promise((resolve,reject)=>{
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化
            xhr.open("GET","https://api.apiopen.top/getJoke")
            //3.发送
            xhr.send();
            //4.绑定事件，处理响应事件数据
            xhr.onreadystatechange = function(){
                //判断, === 4 发送成功并且已经返回
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300 ){
                        //表示成功
                        resolve(xhr.response)
                    }else{
                        //失败  =>回调函数进行处理
                        resolve.reject(xhr.status)
                    }
                }
            }
        })

        p.then(function(value){
            console.log(value)
        },function(reason){
            console.log(reason)
        })






    </script>
    
</body>
</html>